<template>
  <BasicModal ref="showActionModal" :title="`详情-制品信息`" width="1000px" @emit-close="modalCallbackFn">
    <template #content>
      <div class="basic-info">
        <NavTitle title="基本信息" showRightIcon class="nav-title-bottom" />
        <div class="basic-info-content">
          <div class="basic-info-info" v-for="(item, index) in baseList" :key="index">
            <div class="basic-info-name">{{ item.name }}</div>
            <div class="basic-info-description">{{ item.description }}</div>
          </div>
        </div>
        <div class="basic-info-select">
          <a-select
            v-model:value="selectPackage"
            :options="packageList"
            placeholder="选择包名"
            @change="handelChangePackage"
            style="width: 280px"
            :fieldNames="{ label: 'version', value: 'restId' }"
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
        <NavTitle title="版本信息" showRightIcon class="nav-title-bottom" />
        <div class="basic-info-content">
          <div class="basic-info-info" v-for="(item, index) in versionsList" :key="index">
            <div class="basic-info-name">{{ item.name }}</div>
            <div class="basic-info-description">{{ item.description }}</div>
          </div>
        </div>
        <!-- docker -->
        <template v-if="RepositoryEnum.DOCKER === artifactObj.artifactType">
          <NavTitle title="镜像历史" showRightIcon class="nav-title-bottom" />
          <Table
            ref="tableRef"
            :columns="columns"
            :data="loadData"
            :alert="false"
            bordered
            class="nav-title-bottom"
            :showPagination="false"
          />
        </template>
        <!-- maven -->
        <template v-if="RepositoryEnum.MAVEN === artifactObj.artifactType">
          <NavTitle title="文件信息" showRightIcon class="nav-title-bottom" />
          <Table
            ref="fileTableRef"
            :columns="fileColumns"
            :data="fileLoadData"
            :alert="false"
            bordered
            class="nav-title-bottom"
            :showPagination="false"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'fileSize'">
                <span>{{ record.fileSize }} bytes</span>
              </template>
            </template>
          </Table>
          <NavTitle title="Maven 依赖" showRightIcon class="nav-title-bottom" />
          <codeView
            title="Maven 依赖"
            :code="mavenCode"
            :dataValues="mavenValue"
            :key="new Date().getTime()"
            class="nav-title-bottom"
          />
        </template>
        <!-- npm -->
        <template v-if="RepositoryEnum.NPM === artifactObj.artifactType">
          <NavTitle title="依赖" showRightIcon class="nav-title-bottom" />
          <codeView
            title="NPM 引用"
            :code="npmCode"
            :dataValues="npmValue"
            :key="new Date().getTime()"
            class="nav-title-bottom"
          />
        </template>
      </div>
    </template>
  </BasicModal>
</template>

<script lang="ts" setup>
import codeView from '../codeView.vue';
import {
  queryArtifactRespositoryComponentListFun,
  getArtifactFileList,
  getBuildHistoryList,
} from '@/api/artifactRepository';
import { CaretDownOutlined } from '@ant-design/icons-vue';
import { RepositoryEnum } from '@/enums/commonEnum';
import { useArtifactRepositoryStore } from '@/store/modules/artifactRepository';
const artifactRepositoryStore = useArtifactRepositoryStore();
const { artifactObj } = artifactRepositoryStore;
const emits = defineEmits(['hidePackageDetailsModal']);
const showActionModal = ref<any>(null);
// 当前选中的select的版本
const selectVersion = ref<any>({});
const selectPackage = ref(undefined);
const packageList = ref([]);
const baseList = ref([
  {
    name: '包名',
    description: '',
    value: 'packageName',
  },
  {
    name: '最新推送版本',
    description: '',
    value: 'latestVersion',
  },
  {
    name: '最近更新时间',
    description: '',
    value: 'latestUpdateTime',
  },
  {
    name: '版本总数',
    description: '',
    value: 'componentCount',
  },
]);

const versionsList = ref([
  {
    name: '推送人',
    description: '',
    value: 'pushUserName',
  },
  {
    name: '推送时间',
    description: '',
    value: 'pushTime',
  },
]);

const mavenValue = ref({
  groupId: 'com.example',
  artifactId: 'example',
  version: '1.1',
});
const mavenCode = ref<string>(`<dependency>
  <groupId>{groupId}</groupId>
  <artifactId>{artifactId}</artifactId>
  <version>{version}</version>
</dependency>`);

const npmValue = ref({
  packageName: 'saber-admin',
});
const npmCode = ref<string>(`npm install {packageName}`);

// 在父列表中传过来的item对象
const tableItems = ref<any>({});
const modalCallbackFn = async () => {
  emits('hidePackageDetailsModal');
  showActionModal.value.hideModal();
};

const onOpen = (obj: any) => {
  tableItems.value = obj;
  baseList.value = baseList.value.map((item) => {
    item.description = obj[item.value];
    return item;
  });
  showActionModal.value.showModal(obj, '关闭');
  getList();
};

const getList = async () => {
  let data = {
    packageUuid: tableItems.value.uuid,
  };
  await queryArtifactRespositoryComponentListFun(data).then((res) => {
    packageList.value = res;
    selectVersion.value = res.find((item: any) => item.isLatest === true);
    selectPackage.value = selectVersion.value.restId;
  });
};

const tableRef = ref<any>(null);
const getDockerListData = async () => {
  const restId = selectVersion.value.restId as string;
  return await getBuildHistoryList(restId).then((res) => {
    return res;
  });
};

const fileTableRef = ref<any>(null);
const getArtifactFileListData = async () => {
  const restId = selectVersion.value.restId as string;
  return await getArtifactFileList(restId).then((res) => {
    return res;
  });
};

const columns = [
  { dataIndex: 'created', title: '创建时间', align: 'left', ellipsis: true, width: '240px' },
  { dataIndex: 'created_by', title: '命令', align: 'left', ellipsis: false },
];

const fileColumns = [
  { dataIndex: 'assetName', title: '文件名', align: 'center', ellipsis: true },
  { dataIndex: 'fileSize', title: '大小', align: 'center', ellipsis: true },
];

const fileLoadData = async () => {
  if (!selectVersion.value.restId) return [];
  const data = await getArtifactFileListData();
  return data;
};

const loadData = async () => {
  if (!selectVersion.value.restId) return [];
  const data = await getDockerListData();
  return data;
};

const handelChangePackage = (value: string) => {
  selectVersion.value = packageList.value.find((item: any) => item.restId === value);
};

watch(selectVersion, (newValue) => {
  if (Object.keys(newValue).length > 0) {
    versionsList.value = versionsList.value.map((item) => {
      item.description = newValue?.[item.value];
      return item;
    });

    if (RepositoryEnum.MAVEN == artifactObj.artifactType) {
      fileTableRef.value.refresh(true);
      mavenValue.value.groupId = newValue?.groupId;
      mavenValue.value.artifactId = newValue?.nameId;
      mavenValue.value.version = newValue?.version;
    }

    if (RepositoryEnum.DOCKER == artifactObj.artifactType) {
      tableRef.value.refresh(true);
    }

    if (RepositoryEnum.NPM == artifactObj.artifactType) {
      npmValue.value.packageName = newValue?.nameId;
    }
  }
});

defineExpose({
  onOpen,
});
</script>

<style lang="less" scoped>
.basic-info {
  max-height: calc(100vh - 272px);
  overflow-y: auto;
  width: calc(100% + 20px);
  padding-right: 20px;
  .nav-title-bottom {
    margin-bottom: 20px;
  }
  .basic-info-content {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ecf3fb;
    border-right: 1px solid #ecf3fb;
    border-left: 1px solid #ecf3fb;
    border-radius: 4px;

    .basic-info-info {
      display: flex;
      width: 50%;
      align-items: center;
      min-height: 54px;
      border-bottom: 1px solid #ecf3fb;
      &:nth-child(odd) {
        border-right: 1px solid #ecf3fb;
      }

      .basic-info-name {
        min-width: 120px;
        flex: 3;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        background: #f9faf9;
        box-shadow: 1px 0px 0px 0px rgba(236, 243, 251, 1);
        border-radius: 4px 0px 0px 0px;
        font-size: 14px;
        color: #666666;
        font-weight: 400;
      }
      .basic-info-description {
        flex: 7;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 16px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }
  .basic-info-select {
    margin-bottom: 20px;
    width: 100%;
  }
}
</style>
